import {BasePlugin} from '../base/base-plugin.js';
import {DeviceStyleManager, DeviceLayoutManager} from './device-managers.js';

(function () {
    const SELECTOR = 'widget-device-preview-area';

    class DevicePlugin extends BasePlugin {
        static DEFAULT_CONFIG = {
            ...BasePlugin.DEFAULT_CONFIG,
            SELECTOR: SELECTOR,
            EXTENSION_NAME: "device",
            BACKGROUND_CLICKED: false,
            CONSTANTS: {
                CLASS_PREFIX: "device-preview",
                PREVIEW_WRAPPER_CONTAINER: "device-transform-wrapper",
                PREVIEW_CONTAINER: "device",
                PREVIEW_FRAME: "device-frame",
                PREVIEW_IMAGE: "device-screen",
                PREVIEW_CONTENT: "device-content",
                CONTROLS_CONFIG: {
                    device: {widget: 'Dropdown', event: ["change"], default: 'macbook'},
                    align: {widget: 'Dropdown', event: ["change"], default: 'center'},
                    color: {widget: 'ColorPicker', event: ["change", "input"], default: '#ffffff'},
                    background: {widget: 'ColorPicker', event: ["change", "input"], default: 'transparent'},
                    // 【注意】滑块组件需要定义 scaleFactor（缩放因子） 和 symbol（符号）；toFixed（保留小数位数）为组件特性，不需要修改
                    size: {
                        widget: 'IntSlider',
                        event: ["change"],
                        default: 40,
                        scaleFactor: 0.1,
                        symbol: 'rem',
                        toFixed: 1
                    },
                    weight: {
                        widget: 'IntSlider',
                        event: ["change"],
                        default: 40,
                        scaleFactor: 10,
                        symbol: '',
                        toFixed: 1
                    },
                    posy: {
                        widget: 'IntSlider',
                        event: ["change"],
                        default: 50,
                        scaleFactor: 1,
                        symbol: '%',
                        toFixed: 1
                    },
                    src: { widget: 'Text', event: ["change"], default: '/_static/images/device/bg-02.jpg'},
                    width: {
                        widget: 'IntSlider',
                        event: ["change"],
                        default: 100,
                        scaleFactor: 1,
                        symbol: '%',
                        toFixed: 1
                    },
                    height: {
                        widget: 'IntSlider',
                        event: ["change"],
                        default: 100,
                        scaleFactor: 1,
                        symbol: '%',
                        toFixed: 1
                    },
                    style: { widget: 'Textarea', event: ["change"], default: '' },
                    contentonly: {widget: 'Checkbox', event: ["change"], default: false},
                },
                DEVICE_SPECS: {
                    // Mac 设备
                    'macbook-pro': {width: 740, height: 434},
                    'macbook-pro-2018': {width: 740, height: 444},
                    'macbook': {width: 740, height: 432},
                },
                IMAGE_SRC: "../../../_images/bg-02.jpg",
                DEVICE_CONTENT: "你好，世界！",
            },
            MANAGERS: {
                ...BasePlugin.DEFAULT_CONFIG.MANAGERS,
                style: DeviceStyleManager,
                layout: DeviceLayoutManager,
            }
        };

        afterInitEvents() {
            // 控件变化监听
            Object.entries(this.controls).forEach(([key, control]) => {
                // 背景颜色点击监听
                if (key === 'background' && control.element.length > 0) {
                    this.updateEventRecord(key, 'click');
                    control.element.on('click', () => {
                        this.config.BACKGROUND_CLICKED = true;
                    });
                }
            });
        }

        afterGetConfig(config, from) {
            for (const [key, spec] of Object.entries(this.constants.CONTROLS_CONFIG)) {
                if ((from === "output" || from === "update" && this.config.BACKGROUND_CLICKED === false) && spec.widget === 'ColorPicker') {
                    // 由于 ipywdgets 不支持 transparent，需要手动处理
                    const text = this.controls[`${key}Text`].element.val()
                    if (text === "transparent") {
                        config[key] = "transparent";
                    }
                }
            }
            return config;
        }

        afterResetBtn() {
            // 重置背景颜色点击状态
            this.config.BACKGROUND_CLICKED = false;
        }
    }

    function initPreview() {
        const checkReady = setInterval(() => {
            if ($(`.${SELECTOR}`).length > 0) {
                clearInterval(checkReady);
                new DevicePlugin();
            }
        }, 100);
    }

    if (document.readyState === 'complete') {
        initPreview();
    } else {
        document.addEventListener('DOMContentLoaded', initPreview);
    }
})()